<template>
    <el-container class="body-container">
        <el-header class="header-container">
            <div class="left-header">
                <div class="logo-class">
                    <img src="../assets/logo.png" />
                </div>
                <div class="theme-title-class">
                    <div class="main-title">华设测绘&#8226;风控云</div>
                    <div class="sub-title">数字化企业风控云平台</div>
                </div>
            </div>
            <div class="right-header">
                <div class="icon-menu-content">
                    <el-tooltip effect="dark" :content="store.state.alerts.msg" placement="bottom">
                        <el-badge
                            :value="store.state.alerts.msgNum"
                            :hidden="store.state.alerts.msgNum == 0"
                            class="item"
                            type="warning"
                        >
                            <el-icon color="#fff" :size="22"><ChatLineSquare /></el-icon>
                        </el-badge>
                    </el-tooltip>
                </div>
                <div class="icon-menu-content">
                    <el-tooltip effect="dark" :content="store.state.alerts.taskMsg" placement="bottom">
                        <el-badge
                            :value="store.state.alerts.taskNum"
                            :hidden="store.state.alerts.taskNum == 0"
                            class="item"
                            type="warning"
                            @click="openTaskTab"
                        >
                            <el-icon color="#fff" :size="22" style="cursor: pointer"><BellFilled /></el-icon>
                        </el-badge>
                    </el-tooltip>
                </div>
                <div class="user-div">
                    <a href="javascript:void(0)" class="icon-menu">
                        <img src="../assets/icon/user-icon.png" class="user-icon" />
                    </a>
                    <user-op class="user-op-class"></user-op>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="220px" class="aside-container">
                <div class="aside-content">
                    <el-menu :uniqueOpened="true" class="el-menu-vertical-demo" @select="handleSelect">
                        <nav-menu v-for="item in menu" :data="item" :key="item.id"></nav-menu>
                    </el-menu>
                </div>
            </el-aside>
            <el-main class="main-container">
                <el-tabs v-model="tabs.activeTab" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane v-for="item in tabs.tabList" :key="item.id" :label="item.label" :name="item.id">
                        <component :is="item.component" />
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import { ref, reactive, defineAsyncComponent, markRaw, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import http from '@/http.js'
import treeUtil from '@/utils/tree.js'
import NavMenu from '@/components/sys/NavMenu.vue'
import UserOp from '@/components/sys/UserOp.vue'
import { store } from '@/store'
import homedata from '@/utils/homedata.js'

const router = useRouter()

const modules = import.meta.glob('../pages/**/*.vue')

const menu = ref([])
const taskNum = ref(0)
const taskMsg = ref('当前没有待办任务')
const msg = ref('当前没有新消息')
const msgNum = ref(0)

const tabs = reactive({
    activeTab: '',
    tabList: [],
    tabIndex: 1
})

const init = () => {
    loadUserMenu()
    loadEmployeeInfo()
    loadNotify()

    openTaskTab()
    // addTab({
    //     icon: '',
    //     id: 'd35ff79f-37f3-11ec-ad93-00163e0931bb',
    //     label: '任务中心',
    //     url: '../pages/center/Task.vue'
    // })
}

const loadEmployeeInfo = () => {
    http.fetchForm({
        url: '/bas/employee/getEmployeeInfo',
        method: 'get',
        data: {}
    }).then((res) => {
        let data = res.data
        if (data != null) {
            localStorage.setItem('employeeName', data.name)
            localStorage.setItem('departmentId', data.departmentId)
            localStorage.setItem('departmentCode', data.departmentCode)
            localStorage.setItem('departmentName', data.departmentName)
            localStorage.setItem('phone', data.phone)
            let roles = data.roles
            if (roles != null && roles.length > 0) {
                let roleStr = roles[0].code
                for (let i = 1; i < roles.length; i++) {
                    roleStr = roleStr + ',' + roles[i].code
                }
                localStorage.setItem('roles', roleStr)
            }
            store.setUserName(data.name)
            store.setDepartmentId(data.departmentId)
            store.setDepartmentCode(data.departmentCode)
            store.setDepartmentName(data.departmentName)
        } else {
            localStorage.setItem('employeeName', '')
            localStorage.setItem('departmentId', '')
            localStorage.setItem('departmentCode', '')
            localStorage.setItem('departmentName', '')
            localStorage.setItem('phone', '')
        }
    })
}

const loadNotify = () => {
    homedata.loadNotify()
}

const openTaskTab = () => {
    // addTab({
    //     icon: "",
    //     id: "c0aa024e-0301-11ec-ad93-00163e0931bb",
    //     label: "消息中心",
    //     url: "../pages/news/Msg.vue"
    // })

    addTab({
        icon: '',
        id: 'd35ff79f-37f3-11ec-ad93-00163e0931bb',
        label: '任务中心',
        url: '../pages/center/Task.vue'
    })
}

const handleSelect = (key, keyPath) => {
    let node = getMenuNode(key, menu.value)
    addTab(node)
}

const getMenuNode = (nodeId, array) => {
    for (let i = 0; i < array.length; i++) {
        if (array[i].children) {
            let node = getMenuNode(nodeId, array[i].children)
            if (node != null) {
                return node
            }
        } else {
            if (array[i].id == nodeId) {
                return array[i]
            }
        }
    }
    return null
}

const addTab = (item) => {
    let tabList = tabs.tabList
    let inList = false
    for (let i = 0; i < tabList.length; i++) {
        if (tabList[i].id == item.id) {
            inList = true
            tabs.activeTab = item.id
            break
        }
    }
    if (inList) return

    let page = modules[item.url]
    if (page == undefined || page == null) {
        page = () => import('../components/ErrorPage.vue')
    }
    let component = defineAsyncComponent({
        loader: page,
        delay: 1000,
        timeout: 5000
    })
    tabs.activeTab = item.id
    item['component'] = markRaw(component)
    tabs.tabList.push(item)
}

const removeTab = (targetName) => {
    let tabList = tabs.tabList
    let activeName = tabs.activeTab
    if (activeName === targetName) {
        tabList.forEach((tab, index) => {
            if (tab.id === targetName) {
                let nextTab = tabList[index + 1] || tabList[index - 1]
                if (nextTab) {
                    activeName = nextTab.id
                }
            }
        })
    }
    tabs.activeTab = activeName
    tabs.tabList = tabList.filter((tab) => tab.id !== targetName)
}

const loadUserMenu = () => {
    http.fetchForm({
        url: '/sys/user/queryUserMenu',
        method: 'get',
        data: {}
    }).then((res) => {
        menu.value = treeUtil.generateMenuTreeData('', res.data)
    })
}

// mounted
onMounted(() => {
    init()
})
</script>
<style scoped>
.body-container {
    width: 100%;
    height: 100%;
}

/*Header*/
:deep(.el-header) {
    height: 50px;
    box-sizing: border-box;
    padding: 0;
}

.header-container {
    height: 50px;
    background: #4875ae;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
}

.left-header {
    height: 100%;
    display: flex;
    padding-left: 15px;
}

.logo-class {
    width: 50px;
    height: 50px;
}

.logo-class img {
    width: 100%;
    height: 100%;
    padding: 5px;
}

.theme-title-class {
    height: 50px;
    padding: 10px;
}

.theme-title-class .main-title {
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    color: #fff;
    letter-spacing: 2px;
}

.theme-title-class .sub-title {
    font-size: 12px;
    font-style: italic;
    color: #dadada;
    font-weight: lighter;
}

.right-header {
    height: 100%;
    display: flex;
}

.icon-menu-content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.icon-menu {
    font-size: 13px;
    color: #fff;
}

.icon-menu span {
    font-size: 20px;
}

.icon-menu:hover {
    color: #00adb5;
}

.right-header .user-div {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
}

.right-header .user-div:hover {
    background: #fff;
}

.right-header .user-div:hover .user-op-class {
    visibility: visible;
}

.right-header .user-div .user-op-class {
    visibility: hidden;
}

.user-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

/* el-tabs */
:deep(.el-tabs) {
    width: 100%;
    height: 100%;
}

:deep(.el-tabs__nav-scroll) {
    padding: 0;
    background: #f9f9f9;
}

:deep(.el-tabs__item) {
    font-size: 13px;
    height: 34px;
    line-height: 34px;
    color: #000;
    font-weight: 300;
}

:deep(.el-tabs__header) {
    margin: 0;
}

:deep(.el-tabs__nav-wrap) {
    margin-bottom: 0;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
    border: none;
    border-right: 1px solid #e4e7ed;
    border-radius: 0;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
    border-bottom: none;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
    background: #fff;
    font-weight: normal;
    color: #4875ae;
}

:deep(.el-tabs__content) {
    width: 100%;
    height: calc(100% - 35px);
}

:deep(.el-tab-pane) {
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}

:deep(.el-aside) {
    height: 100%;
    border-right: 1px solid #e4e7ed;
    position: relative;
}

.aside-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px 0;
}

.aside-content::-webkit-scrollbar {
    display: none;
}

.main-container {
    padding: 0;
}
/* 菜单相关 */
:deep(.el-menu) {
    border-right: none;
}

:deep(.el-sub-menu__title) {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
}

:deep(.el-sub-menu .el-menu-item) {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    font-weight: 300;
    padding-left: 48px;
}

:deep(.el-menu-item.is-active) {
    background: #f5f7fa;
    color: #4875ae;
    font-weight: normal;
    border-left: 3px solid #4875ae;
}
</style>
